@extends('layouts.front')

@section('content')
@push('styles')
<style>
input[type="text"] {
    -webkit-appearance: none;
}
textarea{
    -webkit-appearance: none;
}
[v-cloak]{
    display: none;
}
</style>
@endpush

<div class="place-order">
    <a href="#" v-cloak class="weui-cell weui-cell_access order-cell address-cell">
        <div class="weui-cell__bd">
            <p class="shr" >收货人：@{{ address.user }}   <span class="tel" >@{{ address.tel }}</span></p>
            <p class="address" ><i class="icon iconfont icon-address"></i> @{{ address.info }}</p>
        </div>
        <div class="weui-cell__ft"></div>        
    </a>

    <div class="po-pane">
        <div class="po-pane-h">
            <div class="po-pane-hl">
                <img src="{{ $product->sotre['avatar'] }}" alt="" class="store-img">
                <span class="store-name">
                    {{-- {{ $product.user.name }} --}}
                </span>
            </div>
            <div class="po-pane-hr">
                <a class="calltel" href="tel:{{ $product->sotre['tel'] }}">联系卖家</a>
            </div>
        </div>

        <div class="po-pane-b">
            <div class="prod-info">
                <div class="prod-img">
                    <img src="{{ $product->cover_image_url }}" alt="" srcset="">
                </div>
                <div class="prod-detail">
                    {{ $product->name }}  {{ $product->info }}
                </div>
            </div>
            <div class="prod-qty boder-b">
                <div class="qty-label">
                    购买数量
                </div>
                <div class="qty-input">
                    <input class="weui-input" type="number" v-model="nend_qyt" placeholder="">
                </div>
                <div class="qty-unit">
                    {{ $product->unit }}
                </div>
            </div>
            <div class="prod-price">
                <div class="price-label">
                    货品价格
                </div>
                <div class="price-value">
                        {{ $product->price }}元 / {{ $product->unit }} <span class="price-limit">2000{{  $product->unit }}起批</span>
                </div>
            </div>
            <div class="prod-tips boder-b">
                以上价格不含运费，可能与最终成交金额有偏差，购买前请与供应商充分沟通了解详情。
                <a class="calltel" href="tel:{{ $product->sotre['tel'] }}">电话联系</a>
            </div>
            <div class="prod-message">
                <div class="message-label">
                    买家留言
                </div>
                <div class="meesage-box">
                    <textarea class="weui-textarea" placeholder="" v-model="message" rows="2"></textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="po-check-out" v-cloak>
        <div class="po-check-out-amount">
            @{{ amount }}元
        </div>
        <div @click="haddleCreateOrder" class="po-check-out-aciont">
            立即下单
        </div>
    </div>
</div>

@section('tabbar')
@endsection

@push('scripts')
<script>
var vm = new Vue({
    el:"#app",
    data() {
        return {
            address_id: 0,
            address: {
                user: '',
                tel: '',
                info: ''
            },
            product: null,
            nend_qyt: 1,
            message: '',
            loading: null,
        }
    },
    created() {
        this.loading = weui.loading('loading')
        this.getAddressDefault()
        // self = this
        // console.log(this.$route)
        // function pushHistory() { 
        //     var state = { 
        //         title: "title", 
        //         url: "#/orderCreate/101" 
        //     }; 
        //     window.history.pushState(state, "title", "#/orderCreate/103"); 
        // }

        // pushHistory(); 
        // var bool=false; 
        // setTimeout(function(){ 
        //     bool=true; 
        // },1500); 
        // window.addEventListener("popstate", function(e) { 
        //     if(self.$route.name === 'orderCreate') {
        //         window.location.href = '/product/show/104'
        //     }
        //     //alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 
        //     //pushHistory(); 
        // }, false); 
        
        // Cookies.set('ORDER-PID', this.pid) // 手动设置地址
        // // 商品信息
        this.getProduct()

        // const address_set = Cookies.get('SET-ADDRESS') // 手动设置地址
        // if (address_set) {
        //     // 手动设置了地址就获取指定地址
        //     this.address_id = address_set
        //     this.getAddress()
        // }else {
        //     // 获取默认地址
        //     this.getAddressDefault()
        // }
    },
    methods: {
        // 获取默认地址
        getAddressDefault() {
            var self = this;
            $.ajax({
                type: 'get',
                url: '/address/default',
                dataType: 'json',
                success: function(res) {
                    self.loading.hide();
                    if (res.status === 'success') {
                        self.address.user = res.data.contact_name;
                        self.address.tel = res.data.contact_tel;
                        self.address.info = res.data.area + res.data.address;
                    } else {
                        weui.alert('设置收货地址', function(){
                            window.location.href = "{{ route('member.address') }}";
                        });
                    }
                }
            })
        },
        // 获取指定地址
        getAddress() {
            axios.get('/address/' + this.address_id)
                .then(response => {
                    const res = response.data
                    if(res.status === 'success') {
                        this.address.user = res.data.contact_name
                        this.address.tel = res.data.contact_tel
                        this.address.info = res.data.area + res.data.address
                    }
                }).catch( err => {
                    console.log(err)
                }); 
        },
        // 创建订单
        haddleCreateOrder() {
            axios.post('/order/create', {
                pid: this.pid,
                aid: this.address_id,
                qty: this.nend_qyt,
                message: this.message
            }).then(response => {
                const res = response.data
                if (res.status === 'success') {
                    window.location.href = '/member/orderShow/' + res.data;
                }   
            })
        }
    },
    computed: {
        amount: function() {
            return (this.nend_qyt * {{ $product->price }}).toFixed(2)
        }
    }
})
</script>
@endpush
@endsection
